<template>
  <div class="step-component" ref="content">
    <div class="step-item" :class="{ 'no':current < index+1 }" v-for="(item, index) in arr">
      <span class="step-bar"></span>
      <span class="step-item-num"><i>{{index+1}}</i></span>
      <span class="step-item-name" v-html="item"></span>
    </div>
  </div>
</template>

<script>
export default {
  name: 'step',
  props:['current','stepArr'],
  data () {
    return {
      arr:this.stepArr
    }
  },
  mounted(){
    if(parseInt(this.current) > 3){
      this.$refs.content.scrollLeft = 1000;
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
.step-component{ display:flex; padding:10px 0 ; background: #fff; width: 100%; overflow:auto; } 
.step-component .step-item{ position: relative; height: 50px; flex: 1;  }
.step-component .step-bar{ position: absolute; top:12px; width: 100%; height:4px; z-index:0; background:#4aae39; display: block; }
.step-component .step-item-num{ margin:0 auto; display:block; position:relative; border-radius:100px; background: #4aae39; width: 24px; height: 24px; margin-bottom: 5px; border:2px solid #a6d39e;  }
.step-component .step-item-num i{ color: #fff; font-size: 13px; font-weight: bold; height: 20px; line-height: 20px; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);  }
.step-component .step-item-name{ display: block; font-size: 13px; min-width:75px; text-align: center; font-weight: bold; color:#419d14; white-space: nowrap; }
.step-component .step-item.no .step-bar{ background:#d0d0d0; }
.step-component .step-item.no .step-item-num{ background: #d0d0d0; color: #fff; border-color:#f3f3f3;  }
.step-component .step-item.no .step-item-name{ color: #bbb;   }
</style>
